<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <p slot="title">{{ title }}</p>
    <div class="material-search-container">
      <el-row>
        <el-col :span="24">
          <div class="chioseFileDiv">
            <span style="margin-left: 35px">{{ sysBusinessImportDialog.downloadImportTemplate }}</span>
            <div style="float: right; margin-right: 45px">
              <el-button
                type="primary"
                icon="el-icon-download"
                @click="downLoad"
                >{{ sysBusinessImportDialog.clickDownload }}</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          <div class="chioseFileDiv">
            <span style="margin-left: 35px">{{ sysBusinessImportDialog.uploadImportContent }}</span>
            <div style="float: right; margin-right: 45px">
              <el-button
                slot="trigger"
                size="small"
                type="primary"
                @click="choiseFile()"
                >{{ sysBusinessImportDialog.selectFile }}</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-paperclip"
                @click="uploadImport"
                >{{ sysBusinessImportDialog.clickUpload }}</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-upload
            ref="upload"
            accept=".xls, .xlsx"
            :multiple="true"
            action="entrustOrder"
            class="upload-demo"
            :limit="1"
            :on-change="handFileChange"
            :http-request="uploadSectionFile"
            :auto-upload="false"
            :show-file-list="true"
          ></el-upload>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import {
  BusinessImportData,
  DownloadSysBusinessTemplate,
} from "../api/Import/BusinessImport";
import { GetStaticFileInfo } from "@/api/Base";
export default {
  name: "SysBusinessImportDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    sysBusinessImportType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: this.$t("SysBusinessImportDialog.importContent"),
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessImportDialog() {
      return this.$t("SysBusinessImportDialog") || {};
    },
  },
  watch: {},
  methods: {
    // 上传
    uploadSectionFile(params) {
      var file = params.file;
      var isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error(
          this.$t("SysBusinessImportDialog.uploadedFileCannotExceed10")
        );
        return;
      }
      // 判断上传文件的格式
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      if (!extension && !extension2) {
        this.$message({
          message: this.$t("SysBusinessImportDialog.fileXlsXlsxFormat"),
          type: "warning",
        });
        return;
      }
      var formData = new FormData();
      formData.append(file.name, file);
      formData.append("sysBusinessImportType", this.sysBusinessImportType);
      BusinessImportData(formData).then((res) => {
        if (res.code === 200) {
          this.handleClose();
        } else {
          this.count = 0;
          return this.$message.error(res.msg);
        }
      });
    },
    handFileChange(files, fileList) {
      this.fileCount = fileList.length;
    },
    // 选择文件
    choiseFile() {
      this.$refs["upload"].$refs["upload-inner"].handleClick();
    },
    uploadImport() {
      this.$refs.upload.submit();
    },
    // 下载模板
    downLoad() {
      DownloadSysBusinessTemplate({
        sysBusinessImportType: this.sysBusinessImportType,
      }).then((res) => {
        if (res.code === 200) {
          GetStaticFileInfo(res.data);
          // const link = document.createElement("a");
          // link.style.display = "none"; // 去除a标签的样式
          // // 设置连接
          // link.href = `${this.$baseProtocol}//${res.data}`;
          // document.body.appendChild(link);
          // // 模拟点击事件;
          // link.click();
        } else {
          this.$message.error(
            this.$t("SysBusinessImportDialog.contactAdministrator")
          );
        }
      });
    },
    // 关闭弹框
    handleClose() {
      // 清空已选择的文件
      this.$refs.upload.clearFiles();
      this.$emit("update:dialogVisible", false);
      this.$emit("load");
    },
  },
};
</script>
<style lang="scss" scoped>
.chioseFileDiv {
  background-color: #f1f8ff;
  height: 45px;
  line-height: 45px;
}
</style>
